<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="box">1</div>
    <div id="box">2</div>
    <div id="box">3</div>
    <div class="cont">4</div>
    <div class="cont">5</div>
    <div class="cont">6</div>
    <div class="box">
        <div class="xbox">
            <h2>标题1</h2>
            <h2>标题2</h2>
        </div>
        <h2>标题3</h2>
        <h2>标题4</h2>
    </div>
    <div class="list">
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <em>文字1</em>
        <em>文字2</em>
        <em>文字3</em>
    </div>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <input type="text" name="username">
    <input type="text" name="password">
    <input type="text" name="password">
</body>
<script>
    // id：document.getElementById("id名")
    var oBox = document.getElementById("box");
    console.log(oBox);
    oBox.style.background = "red"
    console.log(typeof oBox);

    // class:document.getELementsByClassName("class名")
    var aCont = document.getElementsByClassName("cont");
    console.log(aCont);
    aCont[0].style.background = "yellow"
    aCont[1].style.background = "yellow"
    aCont[2].style.background = "yellow"
    console.log(typeof aCont);

    // tag:document.getElementsByTagName("tag名")
    var aSpan = document.getElementsByTagName("span")
    console.log(aSpan);

    // name:document.getElementsByName("name名")
    var aPass = document.getElementsByName("password")
    console.log(aPass);

    // ES5新增的：
    // querySelector：支持css选择器写法
    // querySelectorAll：支持css选择器写法
    var oEle = document.querySelector("#box");
    var oEle = document.querySelector(".cont");
    var oEle = document.querySelector("span");
    var oEle = document.querySelector("input");
    var oEle = document.querySelector(".box h2");
    console.log(oEle);

    var aEle = document.querySelectorAll("#box");
    var aEle = document.querySelectorAll(".cont");
    var aEle = document.querySelectorAll("span");
    var aEle = document.querySelectorAll("input[name=password]");
    var aEle = document.querySelectorAll(".box h2");
    var aEle = document.querySelectorAll(".box>h2");
    console.log(aEle);


    // var obox = document.getElementsByClassName("box")[0];
    var obox = document.querySelector(".box");
    console.log(obox);
    // 子选择器
    console.log(obox.children);

    // 父选择器
    console.log(obox.parentNode);




    // ==========

    var olist = document.querySelector(".list");

    console.log(olist.firstElementChild);

    console.log(olist.lastElementChild);

    console.log(olist.previousElementSibling);

    console.log(olist.nextElementSibling);

</script>
</html>